<template>
  <div class="dashboard-container">
    <div class="detailHearder">
      <div style="flex:1">优惠卷号: 23423102</div>
    </div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="8">可兑换的截止日期：2020-3-20</el-col>
      <el-col :span="8">状态：已审批</el-col>
      <el-col :span="8">面值(元)：230</el-col>
      <el-col :span="8">兑换后的有效期(天)：234</el-col>
      <el-col :span="8">退卷次数：5</el-col>
      <el-col :span="8">更新时间：2016-09-21 08:50:08</el-col>
      <el-col :span="8">支持渠道：北京移动</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        使用规则
        1、单个订单只能使用一张优惠券。
        <br />2、本优惠卷不得拆分使用，不找零。
      </el-col>
    </el-row>
    <div>状态</div>
    <el-divider></el-divider>
    <div class="state">
      <div>
        <img src="../../assets/timg.png" alt />
      </div>
      <div>
        <div>张丽丽</div>
        <div>2017-10-01 12:00</div>
      </div>
    </div>
    <el-steps :active="1" align-center>
      <el-step title="创建-待审批">
        <div slot="description">
          <div>张丽丽</div>
          <div>2017-10-01 12:00</div>
        </div>
      </el-step>
      <el-step title="已审批">
        <div slot="description">
          <div>同意</div>
          <div>张丽丽</div>
          <div>2017-10-01 12:00</div>
        </div>
      </el-step>
      <el-step title="已下载"></el-step>
      <el-step title="已兑换"></el-step>
      <el-step title="已使用"></el-step>
    </el-steps>
    <div>关联订单</div>
    <el-divider></el-divider>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="name" label="订单编号"></el-table-column>
      <el-table-column prop="name" label="下单时间"></el-table-column>
      <el-table-column prop="name" label="预约门店"></el-table-column>
      <el-table-column prop="name" label="预约时间"></el-table-column>
      <el-table-column prop="name" label="订单状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      input: '',
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}
.searchBox {
  display: flex;
  .inputSearch {
    margin-left: 20px;
    width: 300px;
  }
}
.dashboard {
  &-container {
    margin: 30px;
    .detailHearder {
      display: flex;
      align-items: center;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.state {
  display: flex;
  align-items: center;
  img{
    width: 100px;
    height: 100px;
    margin-right: 40px;
  }
}
</style>
